<template>
  <div class="topCharts" id="topCharts">

    <div class="bar bar1" style="left:25%;">
      <p class="top_text">累计<span id="totalNum">{{total}}</span>宗 </p>
      <div class="bar_box">
        <div class="front bar_color1"></div>
        <div class="top bar_color1"></div>
        <div class="right bar_color1"></div>

        <div class="front bar_color1_act " v-show="total>0"></div>
        <div class="top bar_color1_act " v-show="total>0" ></div>
        <div class="right bar_color1_act " v-show="total>0"></div>
      </div>
      <p class="bottom_text">目前总施工数</p>
    </div>
    <div class="bar bar2" style="left:50%;">
      <p class="top_text">累计<span id="num1">{{bar1}}</span>宗</p>
      <div class="bar_box">
        <div class="front bar_color2"></div>
        <div class="top bar_color2"></div>
        <div class="right bar_color2"></div>

        <div class="front bar_color2_act " v-show="bar1>0" v-bind:style="{ height: b1Height+'rem' }"></div>
        <div class="top bar_color2_act " v-show="bar1>0" v-bind:style="{transform : 'rotateX(90deg) translateX(0.015rem) translateY(0.02rem) translateZ('+blT+'rem) rotateZ(180deg)'}"></div>
        <div class="right bar_color2_act " v-show="bar1>0" v-bind:style="{ height: b1Height+'rem' }"></div>

      </div>
      <p class="bottom_text">重大社会活动</p>
    </div>
    <div class="bar bar3" style="left:75%;">
      <p class="top_text">累计<span id="num2">{{bar2}}</span>宗</p>
      <div class="bar_box">
        <div class="front bar_color3 "></div>
        <div class="top bar_color3"></div>
        <div class="right bar_color3 "></div>

        <div class="front bar_color3_act" v-if="bar2>0" v-bind:style="{ height: b2Height+'rem' }"></div>
        <div class="top bar_color3_act " v-if="bar2>0" v-bind:style="{transform : 'rotateX(90deg) translateX(0.015rem) translateY(0.02rem) translateZ('+b2T+'rem) rotateZ(180deg)'}"></div>
        <div class="right bar_color3_act " v-if="bar2>0" v-bind:style="{ height: b2Height+'rem' }"></div>
      </div>
      <p class="bottom_text">养护施工</p>
    </div>
    <!--<div class="top_text"></div>-->
    <!--<div class="top_text">累计<span>40</span>宗</div>-->
    <!--<div class="top_text">累计<span>40</span>宗</div>-->
    <!--<div class="bottom_text">目前总施工数</div>-->
    <!--<div class="bottom_text">重大社会活动</div>-->
    <!--<div class="bottom_text">养护施工</div>-->
    <!--<div class="bar_bg"></div>-->

  </div>
</template>

<script>
export default {
  name: 'mybar',
  props: {
    bar1: {
      type: [String, Number],
      default: 0
    },
    bar2: {
      type: [String, Number],
      default: 0
    },

  },
  data () {
    return {
      total: this.bar1 + this.bar2 ,
      b1Height: this.bar1/this.total*2.6 ||0 ,
      blT:this.b1Height-0.2 || -0.2,
      b2Height: this.bar2/this.total*2.6 || 0 ,
      b2T:this.b2Height-0.2 || -0.2,
    }
  },
  created: function () {
    // `this` 指向 vm 实例

    this.b1Height=this.bar1/this.total*2.6
    this.blT=this.b1Height-0.2
    this.b2Height=this.bar2/this.total*2.6
    this.b2T=this.b2Height-0.2
  },
  watch: {
    bar1: function(val) {
      this.total= val + this.bar2
      if(this.total>0){
        this.b1Height=val/this.total*2.6
        this.blT=this.b1Height-0.2
      }
    },
    bar2: function(val) {
      this.total= val + this.bar1
      if(this.total>0){
        this.b2Height=val/this.total*2.6
        this.b2T=this.b1Height-0.2
      }
    },
  },
}
</script>

<style>
  .topCharts{width: 100%;height: 4rem;position: relative;font-size: 0.22rem;color:#fff;background: #28262b;}
  .topCharts .bottom_text{font-size: 0.24rem;}
  .topCharts>div{position: absolute;top:50%;transform:translate(-50%,-50%)}
  .bar>p{text-align: center;}
  .bar_box{width: 0.6rem;height: 2.6rem;margin: 0.1rem auto; position: relative;transition: all 6s;transform-style: preserve-3d;transform: rotateX(-25deg) rotateY(315deg);}
  .bar_box>div{position: absolute;bottom: 0;transition: all 2s;transform-style: preserve-3d;}
  .bar_box>div:nth-child(5){transition: all 2.05s;}
  /*.bar_bg{opacity: 0.2}*/
  .front{width: 0.4rem;height: 2.6rem;transform: translateZ(0.2rem);}
  .top{ /*  translateZ = height * 100% -0.3 rem  */  width: 0.405rem;height: 0.405rem;transform: rotateX(90deg) translateY(0.01rem) translateZ(2.4rem) rotateZ(180deg);}
  .right{width: 0.4rem;height: 2.6rem;transform: rotateY(89deg) translateZ(0.2rem);}
  .bar_color1{background: rgba(43,36,107,0.15);}
  .bar_color2{background: rgba(255,167,29,0.15);}
  .bar_color3{background: rgba(34,91,98,0.15);}
  .bar_color1_act{
    background: -moz-linear-gradient(top, #5614ba 0%, #0070f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5614ba), color-stop(100%,#0070f7));
    background: -webkit-linear-gradient(top, #5614ba 0%,#0070f7 100%);
    background: -o-linear-gradient(top, #5614ba 0%,#0070f7 100%);
    background: -ms-linear-gradient(top, #5614ba 0%,#0070f7 100%);
    background: linear-gradient(to bottom, #5614ba 0%,#0070f7 100%);
  }
  .bar_color2_act{
    background: -moz-linear-gradient(top, #fd6713 0%, #f6cb26 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fd6713), color-stop(100%,#f6cb26));
    background: -webkit-linear-gradient(top, #fd6713 0%,#f6cb26 100%);
    background: -o-linear-gradient(top, #fd6713 0%,#f6cb26 100%);
    background: -ms-linear-gradient(top, #fd6713 0%,#f6cb26 100%);
    background: linear-gradient(to bottom, #fd6713 0%,#f6cb26 100%);
  }
  .bar_color3_act{
    background: -moz-linear-gradient(top, #2165e6 0%, #07d6e6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2165e6), color-stop(100%,#07d6e6));
    background: -webkit-linear-gradient(top, #2165e6 0%,#07d6e6 100%);
    background: -o-linear-gradient(top, #2165e6 0%,#07d6e6 100%);
    background: -ms-linear-gradient(top, #2165e6 0%,#07d6e6 100%);
    background: linear-gradient(to bottom, #2165e6 0%,#07d6e6 100%);
  }


</style>
